
import { changePrimaryColor, themePrimaryList } from '@/utils/theme-color-generate'
import { useDark } from '@vueuse/core'
import { useToggle } from '@vueuse/shared'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
import { APP_NAME } from '@/globals'

// 导出一个名为 changeTheme 的函数，接收一个参数 data
export const changeTheme = (data: any) => {
  // 使用 useDark 钩子获取当前是否为暗黑模式
  const isDark = useDark({
    // 根据乾坤子环境选择相应的元素作为主题切换的目标
    selector: qiankunWindow.__POWERED_BY_QIANKUN__? document.querySelector(`#${APP_NAME}`) as HTMLElement : document.documentElement,
  })

  // 使用 useToggle 钩子来切换某个状态（可能是 UI 元素的显示或隐藏）
  useToggle(isDark.value)

  // 根据传入的 data 参数中的 primary 属性值，更新当前主题的主色调
  changePrimaryColor(themePrimaryList.find(item => item.label === data.primary)?.value as string)
}

// 导出一个名为 registLocalStorageListener 的函数，用于监听本地存储的变化
export const registLocalStorageListener = () => {
  // 保存原始的 localStorage.setItem 方法
  const signSetItem = localStorage.setItem

  // 重写 localStorage.setItem 方法，添加事件监听逻辑
  localStorage.setItem = function (key, val) {
    // 创建一个新的事件对象
    let setEvent: any = new Event('setItemEvent')
    // 将事件对象的 key 和 newValue 属性设置为传入的 key 和 val
    setEvent.key = key
    setEvent.newValue = val
    // 触发自定义的 'setItemEvent' 事件
    window.dispatchEvent(setEvent)
    // 调用原始的 localStorage.setItem 方法来实际地设置本地存储的值
    signSetItem.apply(this, arguments as any)
  }

  // 监听 'setItemEvent' 事件，当主题相关的键值发生变化时调用 changeTheme 函数
  window.addEventListener('setItemEvent', function (e: any) {
    if (e.key === 'theme') {
      // 解析存储的主题数据
      const themeData = JSON.parse(e.newValue)
      // 调用 changeTheme 函数来更新主题
      changeTheme(themeData)
    }
  })
}
